<template>
  <div >
    <ul class = "locationAlphabet">
        <li
        v-for = "item of alphabetList"
        :key = "item.id"
        @click = "letterclick"
        >{{item.name}}</li>
    </ul>
    <div 
    class = "reminder" 
    ref = "distance"
    :style = "hidden"
    >{{this.content}}</div>
  </div>
</template>

<script>
export default {
  name: 'locationAlphabet',
  props:["alphabetList"],
  methods:{
      letterclick:function(e){
          this.content = e.target.innerText
          for(let i = 0;i < this.alphabetList.length;i++){
              if(this.content === this.alphabetList[i].name){
                    let distance = 0.8+((i+1)*0.35)
                    const showelement = this.$refs.distance
                    this.hidden.display = "block"
                    showelement.style = "top:"+distance+"rem"
                    setTimeout(function(){
                         showelement.style = "display:none"
                    },500)
              }
          }
          this.$emit('change',this.content)
      }
  },
  data(){
      return{
          content:'',
          hidden:{
              display:"none"
          }
         
      }
  }
  

}
</script>

<style lang = 'stylus' scoped>
.locationAlphabet
    position:fixed
    z-index:100
    width:15%
    background:#eff1f5
    top:1.15rem
    right:0
    bottom:0rem
    opacity:.7
.locationAlphabet>li
    text-align:center
    margin:.1rem auto
    color:green
    font-size:10px
.reminder
    position:absolute
    z-index:100
    background:green
    top:.8rem
    right:1rem
    opacity:.7
    text-align:center
    font-size:10px
    padding:.05rem
    color:red
</style>